<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <style>
        body{
            margin: 0;
        }
        .outer{
            background-color: blue;
            height: 200px;
            overflow: hidden;
            /* float: left; */
            /* position:absolute; */
            /* display:inline-block; */
            /* display: flex; */
            /* display: grid; */

        }
        .inner{
            margin-top: 20px;
            width: 200px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

    <!-- 
        什么是BFC：https://blog.csdn.net/sinat_36422236/article/details/88763187

        BFC：块级格式化上下文，是一个独立的布局区域，BFC容器内的布局和外面的元素互不影响。
        BFC布局规则：
            1. 属于同一个BFC中两个相邻的盒子margin会重叠；
            2. BFC容器中有浮动float元素时，也会计算浮动元素的高度；
            3. BFC区域不会被float元素遮挡；
            4. BFC内部的盒子会在垂直的方向，一个接一个放置；
            5. BFC容器内的布局和外面的元素互不影响。
        如何创建BFC
            1. 设置float不为none的元素；
            2. 设置position为absolute和fixed定位的元素；
            3. 设置display为inline-block、table-cell、flex、grid的元素；
            4. 设置overflow不为visible的元素

        BFC的作用：
            1. 可解决相邻盒子margin重叠的问题
            2. 可解决父元素未设高度而子元素浮动导致父元素高度塌陷的问题
            3. 可解决浮动元素遮挡其他元素的问题
            4. 可解决父元素因子元素设置外边距塌陷的问题
     -->
</body>
</html>